<!DOCTYPE html>
<html>
<head>
  <title>DataTables Complex Example</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
  <style>
    .custom-row {
      background-color: #f0f0f0;
    }

    .highlight-row {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <table id="myTable" class="display">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <script>
    $(document).ready(function() {
      var table = $('#myTable').DataTable({
        "paging": true,
        "pageLength": 10,
        "searching": true,
        "order": [[ 1, "asc" ]],
        "columnDefs": [
          {
            "targets": [0],
            "className": "custom-row"
          }
        ],
        "rowCallback": function(row, data) {
          if (data[1] > 30) {
            $(row).addClass('highlight-row');
          }

          $(row).off('click').on('click', function() {
            var rowData = table.row(row).data();
            var message = "Name: " + rowData[0] + "\nAge: " + rowData[1] + "\nCity: " + rowData[2];
            alert(message);
        });
        },
        "language": {
          "lengthMenu": "显示 _MENU_ 行数据",
          "search": "搜索:",
          "info": "显示第 _START_ 到 _END_ 条数据，共 _TOTAL_ 条",
          "paginate": {
            "first": "首页",
            "last": "尾页",
            "next": "下一页",
            "previous": "上一页"
          }
        }
      });

      // 动态生成100行随机数据
      for (var i = 0; i < 100; i++) {
        var name = "User " + i;
        var age = Math.floor(Math.random() * 50) + 20; // 生成20-69之间的随机年龄
        var city = "City " + Math.floor(Math.random() * 5); // 生成City 0-4之间的随机城市

        table.row.add([name, age, city]).draw(false);
      }
    });
  </script>
</body>
</html>
